<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover" />
    <!-- 禁用缓存 -->
    <meta http-equiv="pragram" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>宝马</title>
    <style>
      .loading-next {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 2000;
        background-color: white;
      }
      .loading-next .loading-next-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .loading-next .loading-next-box-warp {
        width: 80px;
        height: 80px;
      }
      .loading-next .loading-next-box-warp .loading-next-box-item {
        width: 33.333333%;
        height: 33.333333%;
        background: #0486fe;
        float: left;
        animation: loading-next-animation 1.2s infinite ease;
        border-radius: 1px;
      }
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7) {
        animation-delay: 0s;
      }
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8) {
        animation-delay: 0.1s;
      }
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9) {
        animation-delay: 0.2s;
      }
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6) {
        animation-delay: 0.3s;
      }
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3) {
        animation-delay: 0.4s;
      }
      @keyframes loading-next-animation {
        0%,
        70%,
        100% {
          transform: scale3D(1, 1, 1);
        }
        35% {
          transform: scale3D(0, 0, 1);
        }
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="loading-next" id="loading-next">
        <div class="loading-next-box">
          <div class="loading-next-box-warp">
            <div class="loading-next-box-item"></div>
            <div class="loading-next-box-item"></div>
            <div class="loading-next-box-item"></div>
            <div class="loading-next-box-item"></div>
            <div class="loading-next-box-item"></div>
            <div class="loading-next-box-item"></div>
            <div class="loading-next-box-item"></div>
            <div class="loading-next-box-item"></div>
            <div class="loading-next-box-item"></div>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
